<template>
  <div class="head-container flex items-center justify-between">
    <div class="head-title"> <SvgIcon name="header-title" height="60" width="300" /> </div>
    <div class="head-operate flex justify-end items-center">
      <a-dropdown placement="bottomRight">
        <a-button type="text" class="flex items-center text-lg pl-2 pr-1">
          {{ userStore.userName }}
          <SvgIcon name="arrow-down" width="20" height="20" class="ml-2" />
        </a-button>
        <template #overlay>
          <a-menu>
            <!-- <a-menu-item :style="{ padding: 0 }">
              <div class="flex items-center my-2 mx-4" :style="{ width: 'max-content' }" @click="handleLogout">
                <SvgIcon name="modify-password" width="20" height="20" class="mr-1" />
                修改密码
              </div>
            </a-menu-item> -->
            <a-menu-item :style="{ padding: 0 }">
              <div class="flex items-center my-2 mx-4" :style="{ width: 'max-content' }" @click="handleLogout">
                <SvgIcon name="logout" width="20" height="20" class="mr-1" />
                注销登录
              </div>
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { Modal } from 'ant-design-vue';
  import useUserStore from '@/store/modules/user';
  import router from '@/router';

  const userStore = useUserStore();

  const handleLogout = () => {
    Modal.confirm({
      title: `确定要注销吗？`,
      async onOk() {
        await userStore.userLogout();
        router.push({ path: '/login' });
      },
    });
  };
</script>

<style lang="scss" scoped>
  .head-container {
    height: 100%;
    .head-title {
      width: 520px;
      height: 60px;
      font-size: 30px;
      font-weight: 400;
      letter-spacing: 0.08em;
      color: $white-color-0;
      display: flex;
      align-items: center;
    }
    .head-operate {
      button {
        color: rgb(255 255 255 / 85%);
      }
    }
  }
</style>
